<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all" />
    <link
      rel="stylesheet"
      href="/layuiadmin/style/private_chat_new.css?v={:config('other.ui_version')}"
      media="all"
    />
    <link
      rel="stylesheet"
      href="/layuiadmin/style/group_chat.css?v={:config('other.ui_version')}"
      media="all"
    />
    <style>
      .chat_right {
        width: 100%;
        margin-left: 0px;
      }
    </style>
  </head>
  <body>
    <script>
      admin_user_id = { $admin_user_id };
    </script>
    <div class="chat_right">
      <div class="chat_session">
        <div class="session_area" style="width: 330px">
          <div class="group_title sessionTitle">
            <p>群聊列表(<span class="groupCount">{$count}</span>)</p>
            <p class="create_group_btn createGroup">创建群聊</p>
          </div>
          <div class="chat_list chatList {$group_list?'':'layui-hide';}">
            <dl>
              <div class="chat_not_list {$count<1?'':'layui-hide'}">
                暂无相关群组...
              </div>
              {volist name='group_list' id='info'}
              <dd
                data-groupid="{$info.id}"
                data-groupname="{$info.name}"
                data-anchorid="{$info.anchor_id}"
                data-anchorname="{$info.anchor.nick_name}"
              >
                <div
                  class="device_icon icon_web"
                  style="background-image: url('{$info.avatar}')"
                ></div>
                <div class="user_chat_desc">
                  <p>
                    <span class="nick_name">{$info.name}</span>
                    <span class="last_reply_time">人数:({$info.user_num})</span>
                  </p>
                  <?php if(!empty($info['unread_message'])){?>
                  <p>
                    <span class="nick_name" style="font-size: 12px"
                      >群ID：{$info.id}</span
                    >
                    <span
                      class="last_reply_time"
                      id="group_read_{$info.id}"
                      style="color: red; float: right"
                      >未读:({$info.unread_message})</span
                    >
                  </p>
                  <?php } else {?>
                  <p class="last_reply_msg">群ID：{$info.id}</p>
                  <?php }?>
                </div>
              </dd>
              {/volist}
            </dl>
          </div>
        </div>

        <!--聊天内容区域-->
        {include file='groupchat/send_chat'}

        <!--群组信息区域-->
        <div class="group_info layui-hide groupInfo">
          <div class="group_info_top">
            <span>群聊信息</span>
            <?php if (!empty($supertube)) {?>
            <span class="dissolve dissolveGroupBtn">解散群聊</span>
            <?php }?>
          </div>

          <div class="group_info_area">
            <div class="groupInfoContent">
              <!--基本信息-->
              <!--<div class="group_info_content">-->
              <!--    <div class="g_avatar"><img src="https://dev-1313456448.cos.ap-beijing.myqcloud.com/images/20220929161543390411.jpeg"/></div>-->
              <!--    <div class="g_title">-->
              <!--        <p>群聊名称<span class="editGroupBtn">编辑</span></p>-->
              <!--        <p>群聊号码：ly10566132103103</p>-->
              <!--    </div>-->
              <!--</div>-->
              <!--<dl class="group_info_desc">-->
              <!--    <dt>群介绍</dt>-->
              <!--    <dd>这里是群介绍内容…限制200字符，不设置展示：暂无介绍</dd>-->
              <!--</dl>-->
              <!--<dl class="group_info_desc">-->
              <!--    <dt>欢迎语</dt>-->
              <!--    <dd>这里是群介绍内容…限制200字符，不设置展示：暂无介绍</dd>-->
              <!--</dl>-->
            </div>
            <!--群聊用户列表-->
            <div class="group_user_area">
              <div class="g_user_title">
                <p>群成员(<span class="groupUserCount">233</span>/500)</p>
                <p class="manage_group_btn manageGroupBtn">管理</p>
                <p class="manage_group_btn cancelManageGroupBtn layui-hide">
                  取消
                </p>
              </div>
              <div class="user_search">
                <input
                  name="user_name"
                  style="width: calc(100% - 60px); float: left"
                  id="group_user_list_input"
                  value=""
                  placeholder="请输入群成员昵称或ID进行搜索"
                />
                <div
                  class="layui-btn"
                  id="group_user_list_search"
                  style="
                    height: 20px;
                    line-height: 20px;
                    padding: 0px 10px;
                    border-radius: 8px;
                    margin-left: 5px;
                  "
                >
                  <i
                    class="layui-icon layui-icon-search"
                    style="font-size: 14px"
                  ></i>
                </div>
              </div>
              <!--用户列表-->
              <ul class="group_user_list groupUserList"></ul>
            </div>
          </div>
          <div class="g_manage_user_btn layui-hide gManageUserBtn">
            <span class="selectAllBtn">全选</span>
            <span class="notSelectAllBtn">取消全选</span>
            <span class="removeSelectBtn">移除</span>
          </div>
        </div>
      </div>
    </div>

    <script src="/layuiadmin/layui/layui.2.6.8.js"></script>
    <script src="/static/jquery.min.js"></script>
    <script src="/layuiadmin/modules/groupchat_other.js?v={:config('other.ui_version')}"></script>
    <script src="/layuiadmin/modules/talk.js?v={:config('other.ui_version')}"></script>
    <script>
      layui
        .config({
          base: "/layuiadmin/", //静态资源所在路径
          version: "{:config('other.ui_version')}",
        })
        .extend({
          index: "lib/index", //主入口模块
        })
        .use(["index", "groupchat", "form", "upload"], function () {
          var $ = layui.$,
            upload = layui.upload;

          // 创建群聊弹窗
          $("body").on("click", ".createGroup", function () {
            layer.open({
              type: 2,
              title: "创建群聊",
              content: "/admin/groupchat/add?anchor_id={$anchor_id}",
              area: ["650px", "520px"],
              //offset: '0px',
            });
          });

          // 获取直播私聊列表
          function getGroupList() {
            var group_id = 0;
            if (talk.group_info.id) {
              group_id = talk.group_info.id;
            }
            var chat_list = $("#chatList");
            $.ajax({
              url: '{:url("groupchat/get_group_list")}',
              type: "get",
              data: { anchor_id: { $anchor_id }, group_id: group_id },
              dataType: "json",
              success: function (res) {
                if (res.code != 0) {
                  return;
                }
                // 获取选中的群组
                var active_id = $(".chatList .active").data("groupid");

                $(".groupCount").text(res.count);

                var chat_list_obj = $(".chatList");
                var html = `<dl>`;

                if (res.group_list.length < 1) {
                  html += '<div class="chat_not_list">暂无相关群组...</div>';
                } else {
                  $.each(res.group_list, function (k, item) {
                    let unread_message = `<p class="last_reply_msg">群ID：${item.id}</p>`;
                    if (item.unread_message) {
                      unread_message = `<p>
                                <span class="nick_name" style="font-size: 12px">群ID：${item.id}</span>
                                <span class="last_reply_time" id="group_read_${item.id}" style="color:red;float: right;">未读:(${item.unread_message})</span>
                            </p>`;
                    }
                    html +=
                      `<dd data-groupid="${item.id}" data-groupname="${item.name}" data-anchorid="${item.anchor_id}" data-anchorname="${item.anchor_id}">
                                <div class="device_icon icon_web" style="background-image: url('${item.avatar}')"></div>
                                <div class="user_chat_desc">
                                    <p>
                                        <span class="nick_name">${item.name}</span>
                                        <span class="last_reply_time">人数:(${item.user_num})</span>
                                    </p>` +
                      unread_message +
                      `
                                </div>
                            </dd>`;
                  });
                }

                html += "</dl>";
                chat_list_obj.html("");
                chat_list_obj.html(html);

                if (active_id) {
                  // 设置选中项
                  var active_dd = $(".chatList").find(
                    `dd[data-groupid=${active_id}]`
                  );
                  active_dd.addClass("active");
                }
              },
            });
          }

          // 15秒更新一次聊天
          setInterval(function () {
            getGroupList();
          }, 15000);

          // 展开群组信息
          $("body").on("click", ".showGroupInfo", function () {
            if ($(".groupInfo").hasClass("layui-hide")) {
              $(".groupInfo").removeClass("layui-hide");
              $(".chatUserArea").addClass("show_group");
            } else {
              $(".groupInfo").addClass("layui-hide");
              $(".chatUserArea").removeClass("show_group");
            }
          });
        });

      /**
       * 获取群用户列表
       * @param user_name
       */
      function getGroupUser(user_name = "") {
        if (!talk.group_info.id) {
          return false;
        }
        $.ajax({
          url: "/admin/groupchat/group_user_list",
          type: "post",
          dataType: "json",
          data: { group_id: talk.group_info.id, user_name: user_name },
          success: function (res) {
            if (res.code != 0) {
              return "";
            }
            // 群成员数
            $(".groupUserCount").text(res.count);
            $(".groupUserList").html("");
            $.each(res.list, function (i, val) {
              let user_li = $(`<li></li>`).data(val);
              let html = "";
              if (val.role != 2) {
                html += `<div class="g_checkbox layui-hide"><input type="checkbox" name="" value="${val.user_id}" title=""></div>`;
              }
              let tmpHtml = "";
              if (val.status == 1) {
                tmpHtml = "-禁言";
              }
              html +=
                `<div class="avatar"><img src="${val.avatar}"></div>
                            <div class="nick_id">
                                <p>${val.other_name}` +
                tmpHtml +
                `</p>
                                <p>ID:${val.user_id}</p>
                            </div>
                            <div class="g_manage">
                                <i class="layui-icon layui-icon-set gManageBtn ${
                                  val.role == 2 ? "layui-hide" : ""
                                }"></i>
                                <div class="groupUserManageBtn"></div>
                            </div>`;
              user_li.html(html);
              $(".groupUserList").append(user_li[0]);
            });
          },
          error: function (xhr, status, error) {},
          complete: function (xhr, status) {},
        });
      }
    </script>
  </body>
</html>
